<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group .radio-group {
            display: flex;
            gap: 20px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>用户注册</h2>
        <div class="form-group">
            <label for="account">账号：</label>
            <input type="text" id="account" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" required>
        </div>
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" required>
        </div>
        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="number" id="age" required>
        </div>
        <div class="form-group">
            <label>性别：</label>
            <div class="radio-group">
                <label>
                    <input type="radio" name="sex" value="男" checked> 男
                </label>
                <label>
                    <input type="radio" name="sex" value="女"> 女
                </label>
            </div>
        </div>
        <button onclick="doRegiste()">注册</button>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function doRegiste() {
            const account = document.getElementById('account').value;
            const password = document.getElementById('password').value;
            const username = document.getElementById('username').value;
            const age = document.getElementById('age').value;
            const sex = document.querySelector('input[name="sex"]:checked').value;

            if (!account || !password || !username || !age) {
                alert('请填写所有必填项！');
                return;
            }

            const param = {
                account: account,
                password: password,
                username: username,
                age: parseInt(age),
                sex: sex
            };

            axios.post('http://localhost:10010/user/registe', param)
                .then(response => {
                    if (response.data.code === 1) {
                        alert('注册成功！');
                        // 注册成功后可以跳转到其他页面
                    } else {
                        alert(response.data.message || '注册失败！');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('注册失败，请稍后重试！');
                });
        }
    </script>
</body>
</html> 